<template>
  <div style="height: 100%;display: flex;flex-direction: column">
    <div class="header pc" :class="getDevice()">
      <div class="header-logo" :class="getMenuClass()">
        <img src="../../assets/logo_pc.png">
      </div>

      <div class="header-top">
        <div v-if="device!=2" class="nav-control"
             style="transition: all 0.2s ease-in-out !important;cursor: pointer;">
          <el-icon v-if="!isCollapse" @click="changeCollapse()" style="color: var(--theme_primary_color);"
                   :size="32">
            <Fold/>
          </el-icon>

          <el-icon v-if="isCollapse" @click="changeCollapse()" style="color: var(--theme_primary_color);"
                   :size="32">
            <Expand/>
          </el-icon>
        </div>

        <div class="space">

        </div>

        <div class="header-right">
          <el-icon v-if="!isFullFlag" @click="fullScreen" style="color: black;" :size="20">
            <FullScreen/>
          </el-icon>

          <el-icon v-if="isFullFlag" @click="exitFullScreen" style="color: black;" :size="20">
            <Crop/>
          </el-icon>

          <div class="space" style="width: 50px">
          </div>

          <div class="my-account-wrapper">
            <div style="width: 80px">
              {{ getUsername() }}
            </div>
            <el-dropdown trigger="click" style="color: black;cursor: pointer;">
              <span class="el-dropdown-link">
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="reSetMessage()">个人信息</el-dropdown-item>
                  <el-dropdown-item @click="loginout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <el-avatar style="margin:0px 8px;"
                       src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"/>
          </div>
        </div>
      </div>
    </div>

    <div class="content" :class="getDevice()">
      <div class="menu" :class="getMenuClass()"
           style="transition: all 0.2s ease-in-out !important;padding: 24px 8px;box-sizing: border-box;max-height: 100%;">
        <el-menu
            :default-active="path"
            router style="transition: all 0.2s ease-in-out !important;"
            :collapse="getIsCollapse()" class="el-menu-vertical-demo ">

          <el-menu-item index="/pcIndex/home">
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </el-menu-item>

          <el-menu-item index="/pcIndex/userManage">
            <el-icon><UserFilled /></el-icon>
            <span>用户管理</span>
          </el-menu-item>

          <el-menu-item index="/pcIndex/classManage">
            <el-icon><Memo /></el-icon>
            <span>班级管理</span>
          </el-menu-item>

            <el-menu-item  index="/pcIndex/stuManage">
              <el-icon>
                <Female/>
              </el-icon>
              <span>学生管理</span>
            </el-menu-item>

          <el-menu-item index="/pcIndex/scoreManage">
            <el-icon>
              <Tickets/>
            </el-icon>
            <span>成绩管理</span>
          </el-menu-item>

          <el-menu-item index="/pcIndex/scoreCollectManage">
            <el-icon>
              <Histogram/>
            </el-icon>
            <span>成绩汇总</span>
          </el-menu-item>
<!--          <el-menu-item v-show="this.visible" index="/pcIndex/userManage">-->
<!--            <el-icon>-->
<!--              <User/>-->
<!--            </el-icon>-->
<!--            <span>用户管理</span>-->
<!--          </el-menu-item>-->

<!--          <el-menu-item index="/pcIndex/selectSubManage">-->
<!--            <el-icon>-->
<!--              <Memo/>-->
<!--            </el-icon>-->
<!--            <span>选科管理</span>-->
<!--          </el-menu-item>-->

<!--          <el-menu-item index="/pcIndex/examdetail?subId=1">-->
<!--            <el-icon>-->
<!--              <Trophy/>-->
<!--            </el-icon>-->
<!--            <span style="margin-left: 8px;">成绩管理</span>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="/pcIndex/devicePage">-->
<!--            <el-icon>-->
<!--              <Menu/>-->
<!--            </el-icon>-->
<!--            <span style="margin-left: 8px;">设备管理</span>-->
<!--          </el-menu-item>-->

          <!--          <el-sub-menu index="/index/selectSubManage">-->
          <!--            <template #title>-->
          <!--              <el-icon>-->
          <!--                <Memo />-->
          <!--              </el-icon>-->
          <!--              <span style="margin-left: 8px;">选科管理</span>-->
          <!--            </template>-->
          <!--            <el-menu-item index="/index/selectSubManage">选科管理</el-menu-item>-->
          <!--            &lt;!&ndash; <el-menu-item index="1-2">考试编排</el-menu-item> &ndash;&gt;-->
          <!--          </el-sub-menu>-->

          <!--          <el-sub-menu index="/index/examManage">-->
          <!--            <template #title>-->
          <!--              <el-icon>-->
          <!--                <Calendar />-->
          <!--              </el-icon>-->
          <!--              <span style="margin-left: 8px;">考试管理</span>-->
          <!--            </template>-->
          <!--            <el-menu-item index="/index/examManage">考试管理</el-menu-item>-->
          <!--            &lt;!&ndash; <el-menu-item index="1-2">考试编排</el-menu-item> &ndash;&gt;-->
          <!--          </el-sub-menu>-->


          <!-- <el-menu-item v-if="isAndroid()" index="4" :route="{ path: '/index/setting' }">
            <el-icon>
              <Tools />
            </el-icon>
            <span>系统管理</span>
          </el-menu-item> -->
        </el-menu>
      </div>

      <div class="main" style="flex:1;overflow-y: scroll;">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :key="$route.name" :is="Component" v-if="$route.meta.keepAlive"/>
          </keep-alive>
          <component :key="$route.name" :is="Component" v-if="!$route.meta.keepAlive"/>
        </router-view>
      </div>
    </div>
  </div>


  <el-dialog append-to-body title="用户信息" v-model="dialogFormVisible" width="30%" @close='cancel()'>
    <el-form label-width="80px" size="small" :model="form" :rules="rules" ref="formData">
      <el-form-item label="昵称" prop="nickName">
        <el-input v-model="form.nickName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="原始密码" prop="oldPassword">
        <el-input type="password" v-model="form.oldPassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="form.newPassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="surePassword">
        <el-input type="password" v-model="form.surePassword" autocomplete="off" show-password></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="save('formData')">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>

export default {
  name: "indexPage",

  data() {
    // 身份证号校验
    let checkIdNum = (rule, value, callback) => {

      if (!value) {
        return callback(new Error('确认密码不能为空'))
      } else if (this.form.newPassword !== value) {
        return callback(new Error('两次密码不一致'))
      } else {
        callback()
      }
    }

    return {
      form: {
        newNickName: null,
        newPassword: null,
        oldPassword: null,
        surePassword: null
      },
      imageUrl: "",
      imageUrlVisible: false,
      rules: {
        nickName: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
        ],
        oldPassword: [
          {required: true, message: '请输入原始密码', trigger: 'blur'},
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
        ],
        surePassword: [
          {required: true, message: '请输确认密码', trigger: 'blur'},
          {validator: checkIdNum, trigger: 'blur'}
        ],
      },
      dialogFormVisible: false,
      screenWidth: document.body.clientWidth,
      device: 3,
      isCollapse: false,
      isFullFlag: false,
      path: '',
      visible: false,
    }
  },
  created() {
    this.checkUserRank();
  },
  methods: {
    getDevice() {
      if (this.device === 1) {
        return "mobile";
      }
      if (this.device === 2) {
        return "tablet";
      }
      if (this.device === 3) {
        return "pc";
      }
    },
    changeCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    getMenuClass() {
      return this.isCollapse ? 'notCollapse' : 'isCollapse'
    },
    getIsCollapse() {
      if (this.device == 2) return true;
      return this.isCollapse
    },
    changeSize() {
      const that = this;
      that.screenWidth = document.body.clientWidth;
      if (that.screenWidth < 768) {
        that.device = 1;
      }
      // eslint-disable-next-line no-dupe-else-if
      else if (that.screenWidth < 1200) {
        that.device = 2;
      } else {
        that.device = 3;
      }
    },
    fullScreen() {
      var element = document.documentElement;
      if (!this.isFullFlag) {
        element.requestFullscreen();
      } else {
        element.exitFullscreen();
      }
      this.isFullFlag = !this.isFullFlag
    },

    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen()
      }
      this.isFullFlag = !this.isFullFlag
    },

    getUsername() {
      var jsonObj = JSON.parse(window.localStorage.getItem('user'));
      return jsonObj.nickname;
    },

    checkUserRank() {
      var jsonObj = JSON.parse(window.localStorage.getItem('rank'));
      if (jsonObj.includes("userManage") | jsonObj.includes("superAdmin")) {
        this.visible = true;
        console.log("成功显示");
      }
      console.log(this.visible);
    },

    loginout() {
      window.sessionStorage.removeItem('token');
      this.$router.push({path: '/login'})
    },

    submitForm(formName) {
      console.log("formName", formName);
      let that = this;
      this.$refs[formName].validate((valid) => {
//不打印
        if (valid) {
          console.log('submit!!');
          that.condition = true;
          return
//打印了
        } else {
          console.log('error submit!!');
          that.condition = false;
          return
        }
      });
      return that.condition;
    },
    save(formName) {
      let condition = this.submitForm(formName);
      console.info(condition)
      if (!condition) return;
      let that = this;
      that.$http.post("/user/updatePassword", that.form).then(res => {
        console.info(res);
        if (res.code === 0) {
          that.dialogVisible = false;
          that.$message.success(res.userMsg);
          that.loginout()

        }
      }).catch(e => {
        console.log(e)
      })

    },
    cancel() {
      this.dialogFormVisible = false;
    },
    reSetMessage() {
      console.info(true)
      this.dialogFormVisible = true;
    },
  },
  watch: {},

  mounted() {
    const that = this;
    that.changeSize();
    window.onresize = () => {
      that.changeSize();
    }
    this.path = this.$route.path;
  },


}
</script>

<style scoped>
.header {

  z-index: 999;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  transition: all .2s ease !important;
}

.header-top, .header-logo {
  background: white;
  box-sizing: border-box;
  -webkit-box-shadow: 0 0 20px rgb(89 102 122 / 10%) !important;
}

.header-logo {
  z-index: 999;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all .2s ease !important;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: row;
}

.header-logo img:first-child {
  max-width: 45px;

}

.header-logo img:last-child {
  max-width: 120px;
  margin-left: 16px;
}

.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.my-account-wrapper {
  background-color: #ffffff;
  padding: 4px 12px;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 0 0 20px rgb(89 102 122 / 10%) !important;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.el-icon {
  --color: inherit;
  height: 1em;
  width: 1em;
  line-height: 1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  fill: currentColor;
  color: var(--color);
  font-size: inherit;
}



.header .header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 30px;
  flex: 1;
  transition: all .2s ease !important;
}

.menu {
  transition: all .2s ease !important;
  background: white;
  z-index: 1;
  -webkit-box-shadow: 0 0 20px rgb(89 102 122 / 10%) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;;
}

.pc {
  height: 96px;
}

.pc .header-logo {
  width: 300px;
  padding: 0px 40px;
}

.pc .header-logo.notCollapse {
  width: 80px;
  padding: 0px 40px;
}

.pc .menu.notCollapse {
  width: 80px;
}


.pc .header-logo.notCollapse img:last-child {
  display: none;
}


.pc .menu {
  width: 300px;
}

.tablet {
  height: 80px;
}

.tablet .header-logo {
  width: 100px;
}

.tablet .menu {
  width: 100px;
}

.tablet .menu .el-menu .el-menu-item .el-menu-tooltip__trigger {
  padding: 0px 28px;
}


.tablet .menu .el-tooltip__trigger {
  padding: 0px 28px;
}


.tablet .header-logo img:last-child {
  display: none;
}

.tablet .el-menu {
  width: 80px;
}


.mobile {
  height: 80px;
}

.mobile .header-logo {
  width: 80px;
}

.mobile .header-logo img:last-child {
  display: none;
}

.mobile .header-logo img:first-child {
  max-width: 40px;
}

.mobile .menu {
  width: 300px;
  position: fixed;
  left: 0;
  top: 80px;
  height: 600px;
}

.mobile .menu.notCollapse {
  left: -100%;
}


.mobile .menu.isCollapse {
  left: 0px;
}


.el-menu {
  border: 0 !important;

}

.el-menu-item {
  color: var(--theme_second_color);
}

.el-sub-menu span {
  color: var(--theme_admin_second_color);
}

.el-sub-menu .el-icon {
  color: var(--theme_admin_second_color);
}

.el-menu-item.is-active {
  color: var(--theme_primary_color);
  /* color: rgb(249, 181, 55); */
}

.el-menu-item:hover {
  color: var(--theme_primary_color);
  background-color: transparent;
}

.el-menu-item.is-active {
  background-color: #f8f8f8;
  padding: 15px 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.el-menu-item span {
  margin-left: 8px;
}

.el-menu-item [class^=el-icon] {
  margin-right: 16px;
}

</style>
